<template>
  <router-view />
</template>

<style lang="scss">
// 全局主题变量
:root {
  // 系统主色调
  --app-primary: #424242;
  --app-primary-light: #555555;
  --app-primary-dark: #333333;
  
  // 文字颜色
  --app-text-primary: #303133;
  --app-text-regular: #606266;
  --app-text-secondary: #909399;
  
  // 边框颜色
  --app-border-color: #EBEEF5;
  --app-border-light: #F2F6FC;
  
  // 背景颜色
  --app-bg-primary: #F5F7FA;
  --app-bg-secondary: #FAFAFA;
  --app-bg-white: #FFFFFF;
  
  // 状态颜色
  --app-success: #505050;
  --app-warning: #5A5A5A;
  --app-danger: #5C5C5C;
  --app-info: #666666;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  color: var(--app-text-primary);
  background-color: var(--app-bg-primary);
}

#app {
  height: 100%;
}

// 常用工具类
.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.align-center {
  align-items: center;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-bold {
  font-weight: bold;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.ml-10 {
  margin-left: 10px;
}

.mr-10 {
  margin-right: 10px;
}

.p-10 {
  padding: 10px;
}

// Element Plus组件样式覆盖
.el-card {
  border: 1px solid var(--app-border-light);
  background-color: var(--app-bg-white);
  
  .el-card__header {
    border-bottom: 1px solid var(--app-border-light);
    padding: 15px 20px;
  }
}

.el-table {
  --el-table-border-color: var(--app-border-light);
  --el-table-header-bg-color: var(--app-bg-secondary);
  --el-table-row-hover-bg-color: var(--app-bg-secondary);
}

// 全局按钮样式覆盖
.el-button {
  &.el-button--primary {
    --el-button-bg-color: var(--app-primary);
    --el-button-border-color: var(--app-primary);
    --el-button-hover-bg-color: var(--app-primary-dark);
    --el-button-hover-border-color: var(--app-primary-dark);
    --el-button-active-bg-color: #212121;
    --el-button-active-border-color: #212121;
  }
  
  &.el-button--success {
    --el-button-bg-color: var(--app-success);
    --el-button-border-color: var(--app-success);
    --el-button-hover-bg-color: #424242;
    --el-button-hover-border-color: #424242;
    --el-button-active-bg-color: #383838;
    --el-button-active-border-color: #383838;
  }
  
  &.el-button--info {
    --el-button-bg-color: var(--app-info);
    --el-button-border-color: var(--app-info);
    --el-button-hover-bg-color: #555555;
    --el-button-hover-border-color: #555555;
    --el-button-active-bg-color: #4d4d4d;
    --el-button-active-border-color: #4d4d4d;
  }
  
  &.el-button--warning {
    --el-button-bg-color: var(--app-warning);
    --el-button-border-color: var(--app-warning);
    --el-button-hover-bg-color: #4f4f4f;
    --el-button-hover-border-color: #4f4f4f;
    --el-button-active-bg-color: #454545;
    --el-button-active-border-color: #454545;
  }
  
  &.el-button--danger {
    --el-button-bg-color: var(--app-danger);
    --el-button-border-color: var(--app-danger);
    --el-button-hover-bg-color: #4a4a4a;
    --el-button-hover-border-color: #4a4a4a;
    --el-button-active-bg-color: #404040;
    --el-button-active-border-color: #404040;
  }
}

// 适配移动设备
@media screen and (max-width: 768px) {
  html, body {
    font-size: 14px;
  }
  
  .el-form-item {
    margin-bottom: 18px;
  }
  
  .el-card__header {
    padding: 12px 15px;
  }
  
  .el-card__body {
    padding: 15px;
  }
}
</style> 